<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
var event_id, map, marker, eventByID = {};

function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: new google.maps.LatLng(41.879535, -87.624333),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    google.maps.event.addListener(map, 'click', function(e) {	
	 	placeMarker(e.latLng, map);
	});
}

function placeMarker(position, map) {
	var marker = new google.maps.Marker({
		position: position,
		map: map
	});
	map.panTo(position);
}

{% for event in events %}
eventByID[{{event.id}}] = {
    name: "{{event.name}}",
    lat: {{event.location.y}},
    lng: {{event.location.x}}
};
{% endfor %}

$(document).ready(function () {
    function activateEvents() {
        // Add event click handler
        $('.event').each(function () {
            $(this).click(function() {
            	event_id = this.id
                var event = eventByID[this.id];
                var center = new google.maps.LatLng(event.lat, event.lng);
                if (marker) marker.setMap();
                marker = new google.maps.Marker({map: map, position: center});
                map.panTo(center);
            }).hover(
                function () {this.className = this.className.replace('OFF', 'ON');},
                function () {this.className = this.className.replace('ON', 'OFF');}
            );
        });
    }
    //map.click(function () {prompt('Prompt',gApplication.getMap().getCenter())}); <- nie dziala
    $('#showDetails').click(function () {
    	self.location='details' + event_id
    	});
     $('#addEvent').click(function () {
    	self.location='addevent'
    	});
    activateEvents();
});
</script>
<style>
    body {font-family: sans-serif}
    #map {width: 500px; height: 300px}
    #events {overflow: auto; width: 500px; height: 100px}
    .linkOFF {color: darkblue}
    .linkON {color: white; background-color: darkblue}
</style>
</head>
<body onload='initialize()'>
    <div id=map></div>
    <div id=events>
        {{content}}
    </div>
    <input id=showDetails type=button value="Show details">
    <input id=addEvent type=button value="Add event">
</body>
</html>

